import { StyleSheet, Text, View,Image,ToastAndroid,Alert } from 'react-native'
import React, { useState } from 'react'
import useResponsive from '@/rem/rem'

import { ThemedText } from '@/components/ThemedText'
import { ThemedView } from '@/components/ThemedView'
import { Button, Input, CheckBox, Icon,  } from 'react-native-elements';
import axios from 'axios'
import { router } from 'expo-router'

export default function Updphone() {
    const { w, h, fs } = useResponsive()
    const [xphone, setXphone] = useState('17337914483');
  const [phone, setPhone] = useState('15933248012');
  const [iscount, setIscount] = useState(false);
  const [time,settime]=useState(60)
  const [code, setCode] = useState('');
  const [inputCode, setInputCode] = useState('');
  const [id,setid]=useState('677f8a026b8f7fa143a658de')
  const startTimer=()=>{
    setIscount(true);
    const timerset = setInterval(() => {
      settime((prevTime) => {
        if (prevTime === 0) {
          clearInterval(timerset);
          setIscount(false);
          return 60;
        }
        return prevTime - 1;
      });
    }, 1000);
  }
  const sendCode=async()=>{
     if(!iscount){
      startTimer()
      let {data:{codes}}=await axios.get(`http://192.168.19.112:3000/code?phone=${phone}`)
      setCode(codes)
     }
  }
  const submit=async()=>{
    console.log(4444444444);
    
    console.log(code,1111111);
    console.log(inputCode,2222222)
    
    if(code == inputCode){
      console.log('验证码正确');
      
      let {data:{code}}=await axios.post(`http://192.168.19.112:3000/uphone?phone=${phone}`,{phone:xphone})
      if(code == 200){
        
        Alert.alert('操作成功', '您的操作已成功完成！');
        router.push('/setting/set')
      }
    }else{
      Alert.alert('操作失败', '验证码错误！');
    }
  }

    const styles = StyleSheet.create({
        container: {
          height:'100%',
           
            alignItems: 'center', // 水平居中
            padding: 20,
             backgroundColor:'#fff'
          },
          row: {
            flexDirection: 'row',
            alignItems: 'center',
            paddingVertical: 10,
        
          },
          row2:{
            flexDirection: 'row',
            alignItems: 'center',
             
          },
          label: {
            fontSize: 16,
            fontWeight: 'bold',
            marginRight: 10,
          },
          value: {
            fontSize: 16,
            color: '#555',
          },
          avatar: {
            width: 70,
            height: 70,
            borderRadius: 35,
            marginLeft: 10,
          },
          centerbox:{
            width:w(305),   
          },
          saveButton: {
            width:w(100),
            backgroundColor: '#ff6f00',
            borderRadius: 30,
            marginTop: 50,
          },
          input:{
            width:w(220),
            borderBottomColor:'red'
          },
          input2:{
            width:w(100),
          },
          button:{
            width:w(100),
      
          
          }
           
    })
  return (
    <ThemedView style={styles.container}>
        <ThemedView style={styles.centerbox}>
      <ThemedView style={styles.row}>
        <ThemedText style={styles.label}>旧手机</ThemedText>
        <Input  containerStyle={styles.input}>{phone}</Input>
      </ThemedView>
      <ThemedView style={styles.row}>
        <ThemedText style={styles.label}>新手机</ThemedText>
        <Input containerStyle={styles.input} onChange={(e) => setXphone(e.nativeEvent.text)} >{xphone}</Input>
      </ThemedView>
      <ThemedView style={styles.row2}>
      <Input containerStyle={styles.input} onChange={(e) => setInputCode(e.nativeEvent.text)} >{inputCode}</Input>
       {/*  <Input  containerStyle={styles.input} onChange={(e) => setInputCode(e.nativeEvent.text)}>{inputCode} </Input> */}
        {
          iscount &&<Button title={`${time}s后重新发送`}  buttonStyle={styles.button}> </Button>
        }
        {
          !iscount && <Button title="获取验证码" buttonStyle={styles.button} onPress={()=> sendCode()}> </Button>
        }
        
      </ThemedView>
       
      </ThemedView>

      <Button
            title="提交"
            buttonStyle={styles.saveButton}
             onPress={submit}
          />
    </ThemedView>
  )
}


 
